<!-- 简洁登录页面 -->
<template>
	<view class="loginbg">
		<image class="login-bgimg" src="../../static/images/home/形状 2@2x.png" mode=""></image>
		<image class="login-logo" src="../../static/images/home/组 12@2x.png" mode=""></image>
		<view class="t-login">
			<image class="t-loginimgbg" src="../../static/images/home/圆角矩形 1@2x.png" mode=""></image>
			<button @click="agremnet()">微 信 授 权 登 录</button>
			<view>
				<label class="radio">
					<u-checkbox-group v-model="value"  placement="column" @change="groupChange">
						<u-checkbox v-for="(item, index) in rodiolist" :key="index" :label="item.name" :name="item.name"
							size="12" shape="square">
							
						</u-checkbox>
					</u-checkbox-group>
					<view class="radioxieyi">
						<navigator style="display: inline-block;" url="/pages/index/agreement"
							hover-class="navigator-hover">
							<span style="color: #005bea;">《用户使用协议》,《隐私政策》</span>
						</navigator>
					</view>
				</label>
			</view>

		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		logon
	} from '../../api/login.js'
	export default {
		data() {
			return {
				phone: '', //手机号码
				pwd: '', //密码
				/**微信登录的form数据**/
				wxLoginForm: {
					code: "",
					encryptedIv: "",
					encryptedData: "",
				},
				value: '',
				rodiolist: [{
					name: '已阅读并同意',
					disabled: false
				}, ]

			};
		},
		onLoad() {},
		methods: {
			//立刻注册
			reg() {
				uni.showToast({
					title: '注册账号',
					icon: 'none'
				});
			},
			mobileLogin() {
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf("weixin")) {
							uni.login({
								provider: "weixin",
								success: (loginRes) => {
									this.wxLoginForm.code = loginRes.code
									uni.getUserInfo({
										success: (infoRes) => {
											this.wxLoginForm.encryptedIv = infoRes.iv
											this.wxLoginForm.encryptedData = infoRes
												.encryptedData
											this.sendWxLoginFormToLocalService()
										}
									})
								}
							})
						}
					}
				})
			},
			sendWxLoginFormToLocalService() {
				this.$store.dispatch('Login', this.wxLoginForm).then(() => {
					uni.hideLoading();
					uni.switchTab({
						url: '/pages/login/index',
						success: function(e) {
							// 成功跳转后的回调
						},
						fail: function(e) {
							// 失败的回调
						}
					});
				}).catch(() => {
					uni.showLoading({
						title: '登陆失败'
					});
				})

			},
			groupChange(n) {
				if(this.value=='已阅读并同意'){
					this.value=='未授权'
				}else{
					this.value==n
				}
			},
			agremnet() {
				if (this.value == '已阅读并同意') {
					this.mobileLogin()
					uni.showLoading({
						title: '登陆中'
					});
				} else {
					this.$refs.uToast.show({
						type: 'default',
						title: '默认主题',
						message: "请勾选并阅读协议",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					}, )
				}
			}

		}
	};
</script>
<style lang="scss">
	.loginbg {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

	.login-bgimg {
		width: 100%;
		height: 56%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.t-login {
		position: relative;
		width: 94%;
		height: 37%;
		margin-left: 3%;
		margin-top: 50%;
		overflow: hidden;
	}

	.t-loginimgbg {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 0;
	}

	.t-login button {
		font-size: 28rpx;
		/* background: linear-gradient(to right, #ff8f77, #fe519f); */
		background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		width: 80%;
		margin-top: 25%;
		display: block;
	}

	.radio {
		position: absolute;
		font-size: 22rpx;
		color: #000;
		margin-top: 30rpx;
		margin-left: 75rpx;
	}

	.loginbg /deep/ uni-radio .uni-radio-input {
		width: 22rpx;
		height: 22rpx;
	}

	.loginbg /deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
		font-size: 22rpx;
	}


	.login-logo {
		position: absolute;
		width: 63.5%;
		height: 7.65%;
		left: 18%;
		top: 15%;
	}

	.data {
		position: fixed;
		z-index: 10;
		color: red;
	}
	.radio /deep/ span{
		font-size: 22rpx;
	}
	.radioxieyi{
		position: absolute;
		right: -400rpx;
		top: -2rpx;
		width: 400rpx;
	}
</style>